<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>购物车示例</title>
    <link type="text/css" rel="stylesheet" href="demo.css"/>
</head>
<body>


<div id="app" v-cloak>
    <template v-if="list.length">
        <table>
            <thead>
            <tr>
                <th></th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list">
                <td>{{index + 1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
                    {{item.count}}
                    <button @click="handleAdd(index)">+</button>
                </td>
                <td>
                    <button @click="handleRemove(index)">移除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div>总价：￥{{totalPrice}}</div>
    </template>
    <div v-else>购物车为空</div>


    <div>
        <input v-model="inputMessage" placeholder="请输入。。。"/>
        <div>输入的内容为： {{inputMessage}}</div>
    </div>

    <input type="radio" :checked="picked"><label>单选按钮</label>
    <hr/>

    <input type="radio" v-model="pickedItem" value="html"><label>html</label>
    <input type="radio" v-model="pickedItem" value="js"><label>js</label>
    <input type="radio" v-model="pickedItem" value="css"><label>css</label>
    <div>选择的项是：{{pickedItem}}</div>
    <hr/>
    <input type="checkbox" v-model="pickedItems" value="html"><label>html</label>
    <input type="checkbox" v-model="pickedItems" value="js"><label>js</label>
    <input type="checkbox" v-model="pickedItems" value="css"><label>css</label>
    <div>选择的项是：{{pickedItems}}</div>
    <hr/>
    <select v-model="selected" multiple>
        <option>html</option>
        <option value="js">JavaScript</option>
        <option>css</option>
    </select>
    <div>选择的项是：{{selected}}</div>
    <hr/>

    <input type="checkbox" v-model="bindPicked" :true-value="trueValue" :false-value="falseValue"><label>绑定值</label>
    <div>bindPicked：{{bindPicked}},bindValue:{{bindValue}}</div>
    <hr/>
    <h3>组件(Component)</h3>
    <input v-model="inputMessage" placeholder="请输入。。。"/>
    <my-component :message="inputMessage"></my-component>
    <my-component :message="inputMessage"></my-component>
    <my-component :message="inputMessage"></my-component>


    <hr/>
    <h3>组件间通信</h3>
    <p>总数{{component_total}}</p>
    <component_message @increase="handleMessageTotal" @reduce="handleMessageTotal"></component_message>
    <hr/>
    <h3>动态组件</h3>
    <component :is="currentDynamicComponent"></component>
    <button @click="handleChangeComponent('comA')">切换到A</button>
    <button @click="handleChangeComponent('comB')">切换到B</button>
    <button @click="handleChangeComponent('comC')">切换到C</button>

    <hr/>
    <h3>$nextTick</h3>
    <div id="testNextTick" v-if="showTextNextTick">这是一段文本</div>
    <button @click="getText">获取文本</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="demo.js"></script>

</body>
</html>